/**
 * Created by wei on 17/11/29.
 */
import React, { Component } from 'react';
import axios from 'axios';
import Dropzone from 'react-dropzone'
import cookie from '../cookie.js';
import base from '../base.js';
import PropTypes from 'prop-types';
import '../front/css/publish.css'

const basePath = base().basePath;


class EditImage extends Component{

    constructor(props){
        super(props);
        this.state = {
            user:{},
            files: [],
            token: cookie.getCookie('token'),
            urlValue:'',
            file: void(0)
        }
    }


    componentWillReceiveProps(nextProps){
        const {user} = nextProps;
        this.setState({
            user: user,
        });
    }

    upload(){
        const {close} = this.props;
        let param = new FormData();
        if(this.state.file && this.state.file.name){
            param.append('file', this.state.file, this.state.file.name);
            let config = {
                headers: {'Content-Type': 'multipart/form-data'}
            }
            var that = this;
            axios.post(basePath + "/file/upload", param, config)
                .then(response => {
                    var url = response.data.url;
                    var image = response.data.image;
                    if(url){
                        axios.post(basePath+"/user/edit/image",{'url': url}, {headers: { token: that.state.token }})
                            .then(
                                (res) => {
                                    if(res.data && res.data.username){
                                        cookie.setCookie("avatar",url);
                                        cookie.setCookie("nickname",res.data.nickname);
                                        close();
                                    }
                                }
                            )
                    }
                })
        }
    }

    onDrop(files) {
        if(files && files[0]&&files[0].name){
            var file = files[0];
            this.setState({
                file: file,
            });
            const reader = new FileReader();
            reader.onload = () => {
                const readAsDataURL = reader.result;
                // console.log(readAsDataURL);
                var user = this.state.user;
                user.avatar = readAsDataURL;
                this.setState({
                    user: user,
                });
            };
            reader.onabort = () => console.log('file reading was aborted');
            reader.onerror = () => console.log('file reading has failed');
            reader.readAsDataURL(file);
        }

    }

    render(){

        return (
            <div>
                <div className="p-signin-form p-clearfix">
                    <div>
                        <div className="border1px" style={{width:'200px',height:'200px',float:'left'}}>
                            <img style={{width:'200px', height:'200px', borderRadius:'100px'}} src={this.state.user.avatar}/>
                        </div>
                        <div style={{width:'300px',height:'200px',float:'left',marginLeft:'20px'}}>
                            <section>
                                <div className="dropzone">
                                    <Dropzone className="drop" accept='image/*' onDrop={this.onDrop.bind(this)}>
                                        <p>将图片拖到此处,或者单击此处选择图片.</p>
                                    </Dropzone>
                                    <div className="dropTip" style={{height:'100px', wordWrap:'break-word'}}>
                                        <p>服务器带宽限制,图片不能超过<font color="red">2Mb</font>.给您带来不便,请见谅.</p>
                                        <p>
                                            {this.state.file ? this.state.file.name : ''}
                                        </p>
                                        <p style={{color:'red'}}>
                                            {this.state.file ? (this.state.file.size/1024/1024).toFixed(2)+"Mb" : ""}
                                         </p>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
                <div className="p-signin-foot p-clearfix" style={{height:'70px'}}>
                    <button className="btn1" onClick={this.upload.bind(this)}  style={{float:'right', marginTop:'20px'}}>确定上传</button>
                </div>
            </div>
        )


    }


}

EditImage.propTypes = {
    user: PropTypes.object.isRequired,
    close: PropTypes.func.isRequired,
};

export default EditImage;